<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  html,
  body {
    width: 100%;
    height: 100vh;
    touch-action: none;
    font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
    ;
  }

  .box {
    width: 100%;
    height: 20%;
    background-color: rgb(165, 147, 147);
    background-image: url('../资源/bg.svg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
  }

  .box2 {
    width: 50%;
    height: 20%;
    background-color: rgb(180, 151, 151);
    background-image: url('../资源/bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .box3 {
    width: 375px;
    height: 50px;
    background-color: aquamarine;
  }

  .box4 {
    display: flex;
    overflow-x: auto;
  }

  .box4 .item {
    width: 100%;
    border: 1px solid;
    flex: none;
  }
</style>

<body>
  <div class="box"></div>
  <br />
  <br />
  <div class="box2"></div>
  <br />
  <br />
  <div class="box3"></div>
  <br />
  <br />
  <div class="box4">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <button id="btn1">按钮1</button>
  <button id="btn2">按钮2</button>
  <script>
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    const headDom = document.head;

    btn1.addEventListener('click', () => {
      const styleDom = document.createElement('style');
      styleDom.dataset.lock = 'test';
      styleDom.textContent = ` body{ background-color: red; } `;
      headDom.appendChild(styleDom);
    });

    btn2.addEventListener('click', () => {
      const styleDom = headDom.querySelector('style[data-lock="test"]');
      if (styleDom) styleDom.remove();
    });


    // const transformArrsXY = (arr) => arr[0].map((_, index) => arr.map((row) => row[index]));
    const transformArrsXY = (arr, columns) => {
      return columns.map((name, index) => {
        return {
          name,
          value: arr.map((row) =>
            row[index]

          )
        }
      })
    };

    const transformTableData = (info) => {
      const newInfo = { tableData: { columns: [], data: [], }, echartsData: { columns: [], data: [], }, };
      const columnList = (info?.column || []).map((name) => ({
        title: name,
        dataIndex: name,
        ellipsis: true,
        width: '2rem',
      }));

      // const firstRow = []
      const rowsList = (info?.rows || []).map((value, idx) => {
        const item = {};
        value.forEach((val, i) => {
          item[info?.column[i]] = val;
          item['__rowId__'] = idx;
          // if (i === 0) {
          //   firstRow.push(val)
          // }
        });
        return item;
      });
      newInfo.tableData.columns = columnList;
      newInfo.tableData.data = rowsList;

      const echartList = transformArrsXY(info?.rows, info?.column)


      const firstRow = echartList[0].value
      const echartData = echartList.length > 1 ? echartList.slice(1, echartList.length) : firstRow
      newInfo.echartsData.columns = firstRow;
      newInfo.echartsData.data = echartData;

      console.log('==newInfo====>', newInfo)


    };



    const testObj = {
      column: ['Year', 'Male', 'Female'],
      rows: [
        ['2015', '1736.490000', '1635.350000'],
        ['2016', '1745.240000', '1646.870000'],
        ['2017', '1741.130000', '1648.690000'],
        ['2018', '1745.880000', '1657.760000'],
        ['2019', '1750.740000', '1665.550000'],
        ['2020', '1746.130000', '1666.580000'],
        ['2021', '1745.790000', '1668.870000'],
      ],
    };



    transformTableData(testObj)


  </script>
</body>

</html>